<template>
    <fieldset>
        <legend>侦听器</legend>
        <input type="text" v-model="val">
        <h1>{{ props.testVal}}</h1>
        <h2>{{props.testVal2}}</h2>
        <button>点击</button>
        <button @click="handleclick">点击2</button>
        <button @click="handleclick">点击3</button>
    </fieldset>
</template>
<script setup>
import { watch, ref, defineProps, toRefs,nextTick,reactive } from "vue"
//watch

// 侦听响应式变量
let val = ref("")
watch(val, (newVal, oldVal) => {
    console.log("new----", newVal)
    console.log('old-----', oldVal)
})

//侦听props
let props = defineProps(['testVal', 'testVal2'])
console.log(props)

// 1.侦听整个props
// watch(props, (newVal, oldVal) => {
//     console.log('newProp', newVal)
//     console.log('oldProp', oldVal)
// })

//2.侦听单个prop的变化
// watch(() => props.testVal, (newVal) => {
//     console.log('newVal', newVal)
// })

//3.解构的props也可以侦听

// let { testVal2 } = toRefs(props);

// watch(testVal2,(newVal)=>{
//     console.log('newTestVal2===',newVal)
// })

//4.侦听多个数据
// watch([()=>props.testVal,()=>props.testVal2], (newVal,oldVal) => { 
//     console.log('-----',newVal)
//     console.log('---old---',oldVal)
// })

// 5.强制触发侦听器
// 侦听器函数的执行优化 ，同时修改多个响应式，被watch同时侦听的时候，多个修改会合并成一次watch回调来优化性能
let msg1 = ref('')
let msg2 = ref('小日子')
// let handleclick =()=>{
//     msg1.value = '德国'
//     msg2.value = '日本'
// }
// 如果你在同一个函数里同时改变这些被侦听的来源，侦听器仍只会执行一次
// 2s后，msg1，msg2值才会一起变
// msg2.value = '日本'
// setTimeout(() => {
//     msg1.value = '德国'
// }, 2000);
// 强制触发侦听器函数进行多次回调
let handleclick = async ()=>{
    msg1.value = '德国'
    await nextTick()
    msg2.value = '日本'
}
watch([msg1,msg2],(newVal)=>{
    console.log(newVal);
})

// 6.侦听对象/对象属性
let obj = reactive({
    name:'李雷',
    age:20,
    person:{
        nickname:'卢本伟'
    }
})

setTimeout(() => {
    obj.name = '韩梅梅'
    obj.person.nickname ='7777'

}, 2000);

// 侦听属性
// watch(()=>obj.name,(newVal)=>{
//     console.log(newVal);
// })

// 深度侦听属性
// watch(()=>obj.person,(newVal)=>{
//     console.log(newVal);
// },{
//     // 深度侦听
//     deep:true,
//     // 立即执行
//     immediate:true
// })
</script>